<template>
	<div class="wy-main">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >实名认证</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<div class="wy-main-cont user-auth wy-col-00">
			<a-row >
				<a-col :span="24">
					<div class="auth-portrait">
						<img :src="avatar" />
						<a-icon type="user" />
					</div>
					<div class="auth-info">
						<p v-if="type==1&&attestationStatus==110">
							<a-icon type="info-circle" class="wy-font-18 wy-col-f5b" twoToneColor="#F5B12E" />
							<span>个人实名认证中</span>
							<!--<router-link to="/user/auth/enterprise"> 直接升级为企业用户></router-link>-->
						</p>
						<p v-if="type==1&&attestationStatus==109">
							<a-icon type="exclamation-circle"  class="wy-font-18 wy-col-ff2"twoToneColor="#FF2F47" />
							<span>您还未个人实名认证 </span>
							<!--<router-link to="/user/auth/enterprise"> 直接升级为企业用户></router-link>-->
						</p>
						<p v-if="type==1&&attestationStatus==111">
							<a-icon type="info-circle" class="wy-font-18 wy-col-15" />
							<span>您已完成物流云个人实名认证 </span>
							<!--<router-link to="/user/auth/enterprise"> 升级为企业用户></router-link>-->
						</p>
						<p v-if="type==1&&attestationStatus==112">
							<a-icon type="exclamation-circle"  class="wy-font-18 wy-col-ff2"twoToneColor="#FF2F47" />
							<span>人实名认证失败 </span>
							<!--<router-link to="/user/auth/enterprise"> 直接升级为企业用户></router-link>-->
						</p>
						<p>真实姓名：{{nickName}}</p>
						<p>证件号：{{certificatesNo}}</p>
						<p v-if="type==2&&attestationStatus==111">
							<a-icon type="info-circle" class="wy-font-18 wy-col-15" />
							<span>您已完成物流云企业实名认证 </span>
						</p>
						<p v-if="type==2&&attestationStatus==112">
							<a-icon type="info-circle" class="wy-font-18 wy-col-15" />
							<span>物流云企业实名认证失败 </span>
						</p>
						<p v-if="type==2&&attestationStatus==110">
							<a-icon type="info-circle" class="wy-font-18 wy-col-15" />
							<span>您正在物流云企业实名认证中 </span>
						</p>
						<p v-if="type==2&&attestationStatus==109">
							<a-icon type="info-circle" class="wy-font-18 wy-col-15" />
							<span>您还未进行物流云企业实名认证 </span>
						</p>
						<router-link v-if="attestationStatus==109" :to="type==2?'/user/auth/enterprise':'/user/auth/personal'"><a-button type="primary" class="h-30">立即认证</a-button></router-link>
						<router-link v-if="attestationStatus==112" :to="type==2?'/user/auth/enterprise':'/user/auth/personal'"><a-button type="primary" class="h-30">立即认证</a-button></router-link>
					</div>
				</a-col>
			</a-row>
			<div class="wy-m-b-20 wy-m-t-30">接下来您可以</div>
			<div class="auth-fabu">
				<span>认证成功即可：发布您的货物运输需求，快捷询价、智能比价、乐享海量在线撮合服务。</span>
				<a-button type="primary" class="h-30" v-if="attestationStatus==2">立即发布</a-button>
			</div>
			<div class="wy-m-b-20 wy-m-t-30 wy-col-00">更多推荐</div>
			<a-row >
				<a-col :span="8">
					<div class="auth-tuijian">
						<h4 class="wy-font-16">物流云+电子商务</h4>
						<div>
							随着互联网技术的发展，电子商务在实体产业的普及逐步成熟，如何解决孤岛式电商和降低高额的商业推广问题就成了业内困局
							<br />
							物流云平台充分利用南南省政府资源优势，打通电商数据接口、商品精准推送、智能撮合
						</div>
						<!--<a target="_blank" href="#" style="background:#68ADE2;">查看详情</a>-->
						<a @click="showApply" style="background:#68ADE2;">在线申请</a>
					</div>
				</a-col>
				<a-col :span="8">
					<div class="auth-tuijian">
						<h4 class="wy-font-16">物流云+宣传网站</h4>
						<div>
							物流云兼备行业媒体平台的功能
							<br />
							通过填报企业信息资料并通过企业认证的企业即可以拥有一个专业的宣传网站
							<br />	
							同时可申请独立域名和请平台服务商定制开发与物流云平台无缝对接的官方网站
						</div>
						<!--<a target="_blank" href="#"style="background:#F5B12E;">查看详情</a>-->
						<a style="background:#F5B12E;">进入我的主页</a>
					</div>
				</a-col>
				<a-col :span="8">
					<div class="auth-tuijian">
						<h4 class="wy-font-16">物流云+供应链综合服务商</h4>
						<div >
							携手共赢，与合作伙伴共建绿色供应链新生态
							<br />
							为助力云南特色八大产业发展，物流云打造绿色食品供应链体系，撮合供应、采购、物流等信息。
							<br />
							优先推举供应链综合服务商，为您增加更多商机。
						</div>
						<!--<a target="_blank" href="#" style="background:#6E89F1;">查看详情</a>-->
						<a @click="showApply" style="background:#6E89F1;">在线申请</a>
					</div>
				</a-col>

			</a-row>
		</div>
   		<use-apply ref='alertApply'></use-apply>
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	import useApply from '@/components/dialog/useApply'
	
	export default {
  		components: {useApply},
		data() {
			return {
				type: '',
				attestationStatus:'',
				approvalStatus:'',
				nickName:'',
				certificatesNo:''
			}
		},
		created(){
			this.getuserinfo()
			console.log(this.user)
		},
		computed: {
		    ...mapState({
		      user: state => state.account.user,
		    }),
		    avatar () {
		      return `static/avatar/${this.user.avatar}`
		    }
		},
		beforeCreate() {
		},
		methods: {
			showApply(){
		        this.$refs.alertApply.showModal('查看详情');
		  	},
			// 获取用户基本信息
			getuserinfo(){
				this.$get('/userDetail/'+this.user.username).then((r) => {
					let d = r.data.data
	            	this.approvalStatus = d.approvalStatus
	            	this.attestationStatus = d.attestationStatus
	            	this.type = d.type
	            	this.nickName = d.nickName
	            	this.certificatesNo = d.certificatesNo
	            }).catch((e) => {})
			}
		}
	}
</script>

<style lang="less" scoped>
	.user-auth {
		.auth-portrait{
			width: 150px;
			height: 150px;
			float: left;
		    background: #dddddd;
		    text-align: center;
		    overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
			i{
				font-size: 80px;
			    padding-top: 35px;
			    color: #ffffff;
			}
		}
		.auth-info{
			float: left;
			margin: 8px 0 0 20px;
			.anticon{
				margin-right: 4px;
			    position: relative;
			    top: 2px;
			}
		}
		.auth-fabu{
			background: #E9F4F3;
			display: inline-block;
    		padding: 12px 20px 12px 28px;
		}
		.auth-tuijian{
			div{
			    height: 135px;
			    line-height: 26px;
			    font-size: 14px;
			    padding-right: 50px;
			    overflow: hidden;
			    color: #666666;
				word-break:break-all;
				display:-webkit-box;
				-webkit-line-clamp:4;
				-webkit-box-orient:vertical;

		    }
		    a{
		    	color: #ffffff;
		    	width: 100px;
		    	height: 28px;
		    	line-height: 28px;
		    	text-align: center;
		    	display: block;
    			margin-top: 10px;
		    }
		}
	}
</style>